<template>
    <div class="mymapM">
        <!--捜索-->
        <div v-if="loading" class="loading">
            <van-loading type="spinner"/>
        </div>

        <div class="search-box">
            <div class="search-postion">
                <span class="buts" @click="cancel">返回</span>
                <input type="text" placeholder="附近地址检索框" v-model="search_key"/>
                <span class="clear" v-if="search_key" @click="search_key ='' ">
                  <van-icon color="#8f8f8f" name="clear"/>
                </span>
                <span class="buts border_but" @click="keySearch()">确定</span>
            </div>
        </div>


        <div class="con-box con-map" v-if="!search_key">
            <!--地图-->
            <div class="mapbox">
                <div class="map" id="container"></div>
                <div class="sign"></div>
            </div>
        </div>
        <!--地址列表-->
        <div class="map-list-box" v-if="!search_key">
            <van-list>
                <van-cell icon="location-o" v-for="(item, index) in lists" @click="onAddressLi(item)" :label="item.address" :key="index" :title="item.name" />
            </van-list>
        </div>
        <!--地址列表 end-->

        <!--捜索列表-->
        <div class="search-list" v-if="search_key">
            <van-list>
                <van-cell icon="location-o" v-for="(item, index) in search_list" @click="onSearchLi(item.location)" :label="item.address" :key="index" :title="item.name" />
            </van-list>
            <van-divider v-if="noSearchShow">暂无搜索结果</van-divider>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                center: [106.576257, 29.556469], //经度+纬度
                search_key: "", //搜索值
                lists: [], //地点列表
                search_list: [], //搜索结果列表
                marker: "",
                loading: false,
                noSearchShow: false, //无搜索结果提示，无搜索结果时会显示暂无搜索结果
            };
        },
        props: ['lat', 'lng'],
        mounted() {
            let that=this;

            setTimeout(() => {
                var l=that.lng==0?106.576257:that.lng;
                var t=that.lat==0?29.556469:that.lat;
                that.center=[l,t];
            }, 200);

            setTimeout(() => {
                that.adMap();
            }, 500);

            window.history.pushState(null,null,'#');
            window.addEventListener("popstate",e=>{
                that.cancel();
            },false);
        },
        beforeDestroy(){
            var that=this;
            window.addEventListener("popstate",e=>{
                that.cancel();
            },false);
        },
        methods: {
            adMap() {
                this.loading = true;
                //初始化地图
                var map = new AMap.Map("container", {
                    zoom: 14, //缩放级别
                    center: this.center //设置地图中心点
                    //resizeEnable: true,  //地图初始化加载定位到当前城市
                });
                //获取初始中心点并赋值
                var currentCenter = map.getCenter(); //此方法是获取当前地图的中心点
                this.center = [currentCenter.lng, currentCenter.lat]; //将获取到的中心点的纬度经度赋值给data的center
                console.log(this.center);

                //创建标记
                this.marker = new AMap.Marker({
                    position: new AMap.LngLat(currentCenter.lng, currentCenter.lat) // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                });
                // 将创建的点标记添加到已有的地图实例：
                map.add(this.marker);

                //根据地图中心点查附近地点，此方法在下方
                this.centerSearch();
                //监听地图移动事件，并在移动结束后获取地图中心点并更新地点列表
                var moveendFun = e => {
                    // 获取地图中心点
                    currentCenter = map.getCenter();
                    this.center = [currentCenter.lng, currentCenter.lat];
                    this.marker.setPosition([currentCenter.lng, currentCenter.lat]); //更新标记的位置
                    //根据地图中心点查附近地点
                };
                //更新数据
                var centerSearch = () => {
                    this.loading = true;
                    this.centerSearch();
                };

                if(this.lat==0){
                    AMap.plugin('AMap.Geolocation', function() {
                        var geolocation = new AMap.Geolocation({
                            enableHighAccuracy: true,//是否使用高精度定位，默认:true
                            timeout: 10000,          //超过10秒后停止定位，默认：5s
                            buttonPosition:'RB',    //定位按钮的停靠位置
                            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                            zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点

                        });
                        map.addControl(geolocation);
                        geolocation.getCurrentPosition(function(status,result){

                        });
                    });
                }



                // 绑定事件移动地图事件
                map.on("mapmove", moveendFun); //更新标记
                map.on("moveend", centerSearch); //更新数据
            },
            centerSearch() {
                AMap.service(["AMap.PlaceSearch"], () => {
                    //构造地点查询类
                    var placeSearch = new AMap.PlaceSearch({
                        type:
                            "汽车服务|餐饮服务|购物服务|生活服务|体育休闲服务|医疗保健服务|住宿服务|风景名胜|商务住宅|政府机构及社会团体|科教文化服务|交通设施服务|金融保险服务|公司企业|地名地址信息", // 兴趣点类别
                        pageSize: 30, // 单页显示结果条数
                        pageIndex: 1, // 页码
                        city: "全国", // 兴趣点城市
                        autoFitView: false // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
                    });
                    //根据地图中心点查附近地点
                    placeSearch.searchNearBy(
                        "",
                        [this.center[0], this.center[1]],
                        200,
                        (status, result) => {
                            if (status == "complete") {
                                this.lists = result.poiList.pois; //将查询到的地点赋值
                                this.loading = false;
                            }
                        }
                    );
                });
            },
            keySearch() {
                this.loading = true;
                AMap.service(["AMap.PlaceSearch"], () => {
                    //构造地点查询类
                    var placeSearch = new AMap.PlaceSearch({
                        type:
                            "汽车服务|餐饮服务|购物服务|生活服务|体育休闲服务|医疗保健服务|住宿服务|风景名胜|商务住宅|政府机构及社会团体|科教文化服务|交通设施服务|金融保险服务|公司企业|地名地址信息", // 兴趣点类别
                        pageSize: 30, // 单页显示结果条数
                        pageIndex: 1, // 页码
                        city: "全国", // 兴趣点城市
                        citylimit: false, //是否强制限制在设置的城市内搜索
                        autoFitView: false // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
                    });
                    //关键字查询
                    placeSearch.search(this.search_key, (status, result) => {
                        if (status == "complete") {
                            if (result.poiList.count === 0) {
                                this.noSearchShow = true;
                            } else {
                                this.search_list = result.poiList.pois; //将查询到的地点赋值
                                this.noSearchShow = false;
                                this.loading = false;
                            }
                        } else {
                            this.search_list = [];
                            this.noSearchShow = true;
                        }
                    });
                });
            },
            onAddressLi(e) {
                this.marker.setPosition([e.location.lng, e.location.lat]); //更新标记的位置
                this.$emit('mapData', e);
            },
            onSearchLi(e) {
                this.center = [e.lng, e.lat];
                this.search_key = "";
                // this.loading=true;
                setTimeout(() => {
                    this.adMap();
                }, 500);
            },
            /**
             * 取消
             */
            cancel() {
                //window.scrollTo(0, 0);
                this.$emit('cancel');
            },
        },
        watch: {
            search_key(newv, oldv) {
                if (newv == "") {
                    this.search_list = [];
                    this.noSearchShow = false;
                    setTimeout(() => {
                        this.adMap();
                    }, 1000);
                }
            }
        }
    };
</script>

<style lang="scss" scoped>
    @import "../assets/scss/core/base";
    .con-map {
        height: 500px;
        width: 100%;
    }

    .map-list-box{
        @include wh(100%,730px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .con-box {
        .mapbox {
            margin-bottom: 10px;
            position: fixed;
            z-index: 111;
            width: 100%;
            height: 500px;
            padding: 10px 0;
            background: #eceeee;

            .map {
                width: 100%;
                height: 500px;
            }
        }

    }

    .mymapM {
        .search-box {
            height: 100px;

            line-height: 100px;
            background: #fff;

            border-bottom: 1px solid #bfbec4;

            .search-postion {
                height: 100px;
                line-height: 100px;
                background: #fff;
                border-bottom: 1px solid #bfbec4;
                width: 100%;
                position: fixed;
                z-index: 99999;
                display: flex;
                input {
                    flex: 4;
                    height: 60px;
                    padding:10px 20px;
                    border: none;
                    box-sizing: border-box;
                    font-size: 28px;
                    margin-top: 20px;
                }
                .clear {
                    margin: 2px 6px;
                }
                .buts {
                    width: 15%;
                    text-align: center;
                    display: inline-block;
                    flex: 1;
                }
                .border_but {
                    border-left: 1px solid #8f8f8f;
                    height: 60px;
                    line-height: 60px;
                    margin: 17px 0;
                }
            }
        }
        .search-list {
            width: 96%;
            margin: 0 auto;
            margin-top: 10px;
            border-radius: 5px;
            background: #fff;
            li {
                height: 40px;
                padding: 14px 22px;
                border-bottom: 1px solid #d9d9d9;
                span {
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    font-size: 15px;
                    display: inline-block;
                    width: 90%;
                }
                p {
                    margin-top: 10px;
                    color: #a6a6a6;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    font-size: 13px;
                    width: 90%;
                }
            }
        }
    }

    .loading {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 99999999;
    }
</style>


